<template>
  <div class="wrapper">
    <oe-title name="订单查询"></oe-title>

    <Row class="query-area">
      <i-col span="8">
        <div class="query-title">订单号</div>
        <Input class="query-input" v-model="params.orderId" placeholder="请输入订单号" icon="ios-search" @on-blur="loadDataList" @on-enter="loadDataList"/>
      </i-col>

      <i-col span="8">
        <div class="query-title">门店</div>
        <Select class="query-input" v-model="params.storeCode" placeholder="请选择门店" @on-change="loadDataList" @on-change="loadPosList">
          <Option value="allOrder">全部</Option>
          <Option v-for="store in storeList" :value="store.storeID" :key="store.storeID">{{store.storeName}}({{store.storeCode}})</Option>
        </Select>
      </i-col>

      <i-col span="8">
        <div class="query-title">款机号</div>
        <Select class="query-input" v-model="params.posId" placeholder="请选择POS机号" @on-change="loadDataList">
          <Option v-for="pos in posList" :value="pos.posID" :key="pos.posID">{{pos.posID}}</Option>
        </Select>
      </i-col>

      <i-col span="8">
        <div class="query-title">会员</div>
        <Select class="query-input" v-model="params.retCode" placeholder="请选择发送状态" @on-change="loadDataList">
          <Option value="">全部</Option>
          <Option value="00">发送成功</Option>
          <Option value="99">发送失败</Option>
          <Option value="26">单面帐</Option>
          <Option value="88">未发送</Option>
        </Select>
      </i-col>

      <i-col span="8">
        <div class="query-title">交易时间</div>
        <Date-picker :editable="false" class="query-input" type="daterange" placeholder="请选择日期" @on-clear="clearDate" @on-change="changeDate"></Date-picker>
      </i-col>
    </Row>

    <Table class="log-content" :columns="columns" :data="posOrderData" @on-row-click="clickRow"></Table>
    <Page class="page" :total="pageData.total" :page-size="pageData.pageSize" show-total show-elevator @on-change="changePage"></Page>


  </div>
</template>

<script type="text/ecmascript-6">
  import {formatDate} from '@/common/js/date'
  import title from '@/components/title/title'
  export default {
    props: {
      storeID: {
        type: Number,
        require: true
      }
    },
    data () {
      return {
        params: {
          storeCode: null,
          posId: null,
          invoiceId: null,
          retCode: null,
          orderId: null,
          startDate: null,
          endDate: null,
          type: 4,
          pageNum: 1,
          pageSize: 10
        },
        columns: [
          {
            title: '款机号',
            key: 'posId',
            align: 'center'
          },
          {
            title: '流水号',
            key: 'invoiceId',
            align: 'center'
          },
          {
            title: '订单号',
            key: 'orderId',
            align: 'center'
          },
          {
            title: '交易时间',
            key: 'saleDateTime',
            align: 'center'
          },
          {
            title: '订单总金额',
            key: 'totalMoney',
            align: 'center'
          },
          {
            title: '发送状态',
            key: 'syncFlag',
            align: 'center'
          }
        ],

        posList: [],          // POS机列表
        pageData: {},         // 分页数据
        posOrderData: [],
        showModal: false,     // 详情模态框
        currentData: {},      // 当前点击数据
        storeList:[],         // 门店列表
      }
    },
    created () {
      // 设置全局HTTP请求设置及本地localStorage全局数据
      this.loadLocalStorageData()
      // this.loadPosList()
      this.loadDataList()
      this.storeList = this.$store.state.storeList
    },
    methods: {
      loadPosList () {
        // 根据storeCode加载pos机列表
        let storeTemp = null;
        if (this.storeCode == null) {
          storeTemp = this.$store.state.currentStore;
        } else {
          storeTemp = this.storeCode;
        }
        console.log("this.storeCode:" + this.storeCode)
        console.log("改变页面中storeCode后：" + storeTemp)
        let url = '/pos-main/' + this.$store.state.platformId + '/' + this.$store.state.merchantId + '/' +
          storeTemp + '/config/4'
        this.$http.get(url, { params: this.params }).then((response) => {
          response = response.data
          if (response.state === global.STATE_OK) {
            console.log(response.data.list);
            this.posList = response.data.list;
          } else {
            this.posList = []
          }
        })
      },
      loadDataList () {
        // 加载缴款单数据
        let url = '/order-main/' + this.$store.state.platformId + '/' + this.$store.state.merchantId + '/' +
          this.$store.state.currentStore + '/order'
          console.log("加载页面时的storeCode："+this.$store.state.currentStore)
        this.$http.get(url, { params: this.params }).then((response) => {
          response = response.data
          if (response.state === global.STATE_OK) {
            this.pageData = response.data
            this.posOrderData = response.data.list
            // 设置展示数据
            this.posOrderData.forEach((order) => {
              order.saleDateTime = formatDate(new Date(order.saleDateTime), 'yyyy-MM-dd hh:mm:ss')
              payIn.totalMoney = payIn.totalMoney.toFixed(2) + ' 元'
            })
          } else {
            this.pageData = {}
            this.posOrderData = []
          }
        })
      },


      changeDate (date) {
        this.params.beginDate = date[0]
        this.params.endDate = date[1]
        this.loadDataList()
      },
      clearDate () {
        this.params.beginDate = null
        this.params.endDate = null
        this.loadDataList()
      },
      changePage (pageNum) {
        this.params.pageNum = pageNum
        this.loadDataList()
      },
      clickRow (rowData) {
        this.$router.push({
          name: 'pay-in-query-detail',
          query: {
            id: rowData.id
          }
        })
      },
      loadLocalStorageData () {
        this.$http.defaults.baseURL = global.BASE_URL
        let platformIdLocalData = JSON.parse(window.localStorage.getItem('platformId'))
        let merchantIdLocalData = JSON.parse(window.localStorage.getItem('merchantId'))
        let currentStoreLocalData = JSON.parse(window.localStorage.getItem('currentStore'))
        let storeListLocalData = JSON.parse(window.localStorage.getItem('storeList'))


        this.$store.dispatch('setPlatformId', { platformId: platformIdLocalData })
        this.$store.dispatch('setMerchantId', { merchantId: merchantIdLocalData })
        this.$store.dispatch('setCurrentStore', { currentStore: currentStoreLocalData })
        this.$store.dispatch('setStoreList', { storeList: storeListLocalData })
      }
    },
    watch: {
      storeID () {
        this.loadDataList()
      },
      'params.type' () {
        this.loadPosList()
      }
    },
    components: {
      'oe-title': title
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .wrapper
    display block
    .query-area
      margin-top 25px
      padding: 10px
      background: #f5f5f5
      border-radius:5px
      .query-title
        display: inline-block
        width: 25%
        height: 32px
        line-height: 32px
        margin 10px 0
        text-align: right
        font-size: 14px
      .query-input
        width: 70%
        float right
        margin: 10px 5px

    .log-content
      margin-top 25px
    .page
      margin-top 20px
      float: right
      font-size: 14px
  .detail-content
    font-size 12px
    line-height 24px
    .label
      display inline-block
      height 24px
      line-height 24px
      width 110px
      padding-right 5px
      text-align right
</style>
